<template>
    <div class="footerBox" :style="`width:${list.length*208+57}px`" v-if="list!==null">
        <ul>
            <li v-for="(item,index) in list" :key="item.id">
                <el-popover
                    placement="top-start"
                    width="193"
                    offset="40"
                    trigger="hover"
                    popper-class="menupopover">
                    <p class="menuItem menuThree" v-for="menu in item.menuList" :key="menu.id" @click="openMenu(menu)">{{menu.name}}</p>
                    <div slot="reference">
                        <img :src="imgList[index]" alt="">
                        {{item.groupName}}
                    </div>
                </el-popover>
            </li>
        </ul>
    </div>
</template>

<script>
import appUtil from '~/assets/utils/appUtil';
import { createNamespacedHelpers } from 'vuex';
const { mapMutations: mapTagMutations } = createNamespacedHelpers('tagModule');
export default {
    name: 'FooterMenu',
    data () {
        return {
            imgList:['./assets/images/index/survey.png','./assets/images/index/write.png','./assets/images/index/checklist.png','./assets/images/index/loyalt.png','./assets/images/index/survey.png','./assets/images/index/write.png','./assets/images/index/checklist.png','./assets/images/index/loyalt.png'],
            list:[]
            
        };
    },
    created(){
        this.getFastLink();
    },
    methods: {
        ...mapTagMutations([
            'addTag'
        ]),
        getFastLink(){
            let param = {
                userCode: appUtil.getSes('userCode'),
                compId: '3297434322678447140'
            };
            this.$axios.get('/ptp-uum/fastLink/findFastLink',{params:param}).then((res) => {
                if(res.data.code!==-1){
                    this.list = res.data.groupList;
                }
                
            });
        },
        // 打开菜单
        openMenu (menu) {
            if (!menu.url || menu.url === '') {
                return;
            }
            // 打开方式
            if (menu.isNew) {
                window.open(menu.url);
            } else if (menu.isBuiltin) {
                // 内置页面
                this.addTag(menu);
            } else {
                this.addTag(menu);
            }
            
        },
    },
};
</script>

<style lang="scss" scoped>
.footerBox{
    position: fixed;
    left: 75px;
    right: 0;
    bottom: 0;
    margin: auto;
    background: rgba(255, 255, 255, 0.8);
    box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    border: 1px solid #ECECEC;
    filter: blur(0px);
    padding-left: 57px;
    padding-right: 14px;
    height: 60px;
    li{
        width: 122px;
        height: 70px;
        line-height: 70px;
        background: linear-gradient(180deg, #FFFFFF 0%, #EEEEF1 100%);
        box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.3);
        border-radius: 10px;
        display: inline-block;
        margin:0 43px;
        color: #333;
        font-size: 14px;
        position: relative;
        top: -20px;
        img{
            height: 68px;
            float: left;
        }
    }
}

.menuItem{
    height: 35px;
    line-height: 35px;
    cursor: pointer;
    padding: 0 20px;
}
</style>
<style>
.menupopover{
    padding: 8px 0!important;
}
</style>